<template>
	<view class="content">
		<view class="device-view">
			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title">
						<view>请选择告警原因：</view>
					</view>
					<view style="margin-left: 10px;" class="tag-class"
						:class="{ xuan: checkedArrey.indexOf(item.val) != -1 }" v-for="(item,i) of tagList" :key="i"
						@click="appointment(item)">
						<view class="">{{item.val}}</view>
					</view>
				</view>
			</view>

			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title">
						<view>请描述告警原因：</view>
					</view>
					<view style="margin: 10px 10px 0 10px; background-color: #E7EBF4;">
						<uni-easyinput type="textarea" v-model="form.repairDesc"></uni-easyinput>
					</view>

				</view>
			</view>


			<view class="alarm-view-item">
				<view class="alarm-view-item-c">
					<view class="upload-img-title">
						<view>请上传现场图片：</view>
					</view>
					<view class="upload-img">
						<uni-file-picker limit="9" ref="files" :auto-upload="false"></uni-file-picker>
					</view>
				</view>

			</view>
		</view>
		<button class="add-btn" @click="handleAlarm">提交</button>
	</view>
</template>

<script>
	import { updateAlarmTask,getAlarmTaskList} from '@/api/manager'
	import baseUrl from '../../config/baseUrl.js';
	import { mapGetters	} from 'vuex';
	import currentDate from '../../config/currentDate.js';
	export default {
		data() {
			return {
				id: "",
				form: {},
				tagList: [{
						val: '撬井'
					},
					{
						val: '满水'
					},
					{
						val: '自检'
					},
					{
						val: '设备损坏'
					},
					{
						val: '设备倾斜'
					},
					{
						val: '其他'
					}
				],
				checkedArrey: [],
			}

		},
		onLoad(options) {
			this.id = options.id;
		},
		computed: {
			...mapGetters({
				userInfo: 'userInfo'
			})
		},
		methods: {
			//选择标签
			appointment(item) {
				let index = this.checkedArrey.findIndex(i => {
					if (i == item.val) {
						return true
					}
				})
				if (index != -1) {
					this.checkedArrey.splice(index, 1);
				} else {
					if (this.checkedArrey.length == 3) {
						uni.showToast({
							title: '最多只能选三个告警原因',
							duration: 1000,
							icon: 'none'
						})
					} else {
						this.checkedArrey.push(item.val)
					}
				}
			},

			uploadPic() {
				let roadDiseaseSporPics = []
				let token = this.userInfo.token
				let length = this.$refs.files.files.length
				let count = 0
				return new Promise((resolve, reject) => {
					this.$refs.files.files.forEach(function(item, index) {
						let n = uni.uploadFile({
							url: baseUrl.baseUrl + '/public/uploadAttachmentFile',
							header: {
								'token': token
							},
							filePath: item.url,
							name: 'file',
							success: (uploadFileRes) => {
								let json = JSON.parse(uploadFileRes.data)
								roadDiseaseSporPics.push({
									imgName: item.name,
									imgPath: json.data
								})
								count++
								if (count == length) {
									resolve(roadDiseaseSporPics)
								}
							}
						})
					})

				})
			},
			//提交
			async handleAlarm() {
				let repairDescTag = "";
				this.checkedArrey.forEach(item => {
					repairDescTag = item + ', ' + repairDescTag;
				})
				if(repairDescTag == ""){
					uni.showToast({
						title: '请选择告警原因',
						duration: 1000,
						icon: 'none'
					})
					return false
				}
				this.form.repairDescTag = repairDescTag.substring(0, repairDescTag.length - 2);
				this.form.id = this.id;
				this.form.taskStatus = '1';
				this.form.repairTime = currentDate.getFormatDate();
				if (this.$refs.files.files.length > 0) {
					let roadDiseaseSporPics = await this.uploadPic();
					this.form.jgAlarmTaskPicList = roadDiseaseSporPics;
				}
				updateAlarmTask(this.form).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: "处理成功！",
							duration: 2000
						});
						setTimeout(() => {
							getAlarmTaskList({
									pageNum: 1,
									pageSize: 9999,
									areaName:null,
									responUserId: uni.getStorageSync('userInfo').userId,
									taskStatus:0
								}).then(res => {
									if(res.data.total > 0){
										uni.setTabBarBadge({
										  index: 2,
										  text: res.data.total.toString()
										})
									}else{
										uni.hideTabBarRedDot({index:2})
									}
							})
							uni.navigateBack()
						}, 1000)
					} 
				});


			},
		}
	}
</script>

<style lang="scss" scoped>
	.tag-class {
		float: left;
		margin: 10px 5px 0px 0px;
		width: 20%;
		height: 10%;
		line-height: 50rpx;
		border: 2rpx solid #E6E6E6;
		text-align: center;
		border-radius: 13px;
		display: flex;
		justify-content: center; //左右居中
		align-items: center; //上下居中

		font-size: 12px;
		color: #666;
	}

	.xuan {
		color: #046AFB !important;
		border: 2rpx solid #046AFB;
	}




	page {
		background: #F2F6FF;
		padding-top: 16upx;
	}

	.device-view {
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		width: 95%;
		margin: auto;
		text-align: center;
		margin-bottom: 20px;

		.alarm-view-item {
			padding: 10px;
			background-color: #FFFFFF;
			width: 97%;
			height: auto;
			margin-left: 1.5%;
			margin-top: 10px;

			.alarm-view-item-t {
				display: flex;
				justify-content: space-between;
				padding-bottom: 5px;
				// border-bottom: 1px solid rgba($color: #409eff, $alpha: 0.5);
			}

			.alarm-view-item-c {
				.item-c-i-t {
					margin-top: 10px;
				}

				.item-c-bm-t {
					display: flex;
					margin-left: 15px;
					margin-bottom: 20px;
					justify-content: space-between;
					align-items: center;
					color: #333333;
					font-size: 28upx;
				}

				.upload-img-title {
					display: flex;
					margin-left: 10px;
					color: #333333;
					font-size: 28upx;
				}

				.upload-img {
					background-color: #FFFFFF;
					padding: 10px 10px 0 10px;
				}

			}
		}
	}

	.bot-row {
		padding: 5px;
		display: flex;
		align-items: center;
		font-size: 28upx;
		ine-height: 28px;

		.text1 {
			flex: 1;
			color: #333333;
			display: flex;
			margin-left: 10px;
			justify-content: left;
		}

		.text2 {
			flex: 1;
			color: #333333;
			display: flex;
			margin-right: 10px;
			justify-content: right;
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 20px);
		// height: 80upx;
		margin: 60upx auto;
		color: #fff;
		background-color: #046AFB;
		border-radius: 5px;
		font-size: 14px;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
